<template>
     <!-- 品牌标题部分 -->
      <div class="iot_search">
            <header class="iot_brandheader">
                <img src="@/assets/img/logo.png" alt="">
                <p class="iot_words">| 新鲜 · 亲民 · 快捷</p>
            </header>

      <!-- 搜索框 -->
            <div class="iot_searchcontainer">
                <el-input class="iot_searchput"
                  v-model="input3"
                  style="width: 340px"
                  size="small"
                  placeholder="搜索商品"
                  :prefix-icon="Search"
                />
            </div>
            
      </div>
</template>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.iot_search{
   background-color: #00bb99;
}
/* 品牌标题部分 */
.iot_brandheader {      
  margin-bottom: 20px; 
}

.iot_brandname {
  font-size: 24px;            
  margin-bottom: 8px;         
  color: #333;               
}
.img{
  display: inline-block;
  margin-left: 0;
}

.iot_words {
  font-size: 16px;            /* 适中字号 */
  color: #d9fffa;
  display: inline-block;                /* 灰色文字 */
}

/* 搜索框容器 */
.iot_searchcontainer {
  margin-left: 10%;
  display: flex;                    
  overflow: hidden;           
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}
.iot_searchput{
  background-color: rgb(129,227,210);
}



</style>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const input3 = ref('')
</script>